<template>
  <view class="comment-container">
    <input class="comment-input" v-model="commentText" placeholder="写评论" placeholder-class="placeholder-style"/>
    <button style="margin-left: 10rpx; width: 200rpx; height: 80rpx; line-height: 80rpx" type="primary" @click="submit">
      提交
    </button>
  </view>
</template>

<script>
import {getUser} from '@/utils/auth';
import {createComment} from '@/api/report/report';

export default {
  props: {
    reportId: {
      type: Number,
      require: true
    }
  },
  data() {
    return {
      userId: getUser().userId,
      commentText: ''
    };
  },
  methods: {
    submit() {
      if (this.commentText.trim() === '') {
        uni.showToast({
          title: '输入点什么吧!',
          icon: 'none'
        });
        return;
      }
      // uni.showToast({
      // 	title: this.commentText,
      // 	icon: 'none'
      // });
      let param = {
        userId: this.userId,
        reportId: this.reportId,
        commentContent: this.commentText
      };
      createComment(param).then((res) => {
        this.commentText = '';
        this.$emit('onSubmitSucess', res.data);
      });
    }
  }
};
</script>

<style scoped>
/* 输入框 */
/* 输入框容器 */
.comment-container {
  margin: 30rpx 0;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 输入框主体 */
.comment-input {
  width: 100%;
  height: 80rpx;
  padding: 0 24rpx;
  background: #eee;
  /* border: 1rpx solid #E0E0E0; */
  border-radius: 20rpx;
  font-size: 28rpx;
  color: #333333;
  box-sizing: border-box;
}

/* 占位符文字样式 */
.placeholder-style {
  color: #ccc;
  /* 浅灰色提示文字 */
  font-size: 28rpx;
}

/* 聚焦状态效果（可选） */
.comment-input:focus {
  border-color: #007aff;
  /* 聚焦时蓝色边框 */
}
</style>
